import React, { useState } from 'react'
import { useNavigate } from "react-router-dom"
import "./myscss/Page1.scss"
import { Steps } from 'antd';
import { Toast, NavBar, Overlay } from 'react-vant';
import { ContainerOutlined, ContactsOutlined, FileProtectOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';
import { changeUname, changeTxt2 } from "../../store/modules/HcySlice1"

export default function Page1() {
    let navigate = useNavigate()
    let dispatch = useDispatch()
    const [current, setCurrent] = useState(0);
    const onChange = (value) => {
        if (value === 0) {
            navigate("/ysrz/page1")
        } else if (value === 1) {
            navigate("/ysrz/page2")
        }
        setCurrent(value);
    };
    let { uname, txt1, txt2, txt3, txt4, txt5, txt6 } = useSelector(state => state.HcySlice)
    const [visible, setVisible] = useState(false);

    let [cekidx, setCekidx] = useState(null)

    return (
        <div id='page1'>
            <div className='top1'>
                <NavBar
                    leftText="医师认证"
                    onClickLeft={() => Toast('返回')}
                />
            </div>
            <div className='top2'>
                <Steps
                    current={current}
                    onChange={onChange}
                    items={[
                        {
                            description: "基本信息",
                            icon: <ContainerOutlined />
                        },
                        {
                            description: "执照信息",
                            icon: <ContactsOutlined />
                        },
                        {
                            description: "提交审核",
                            icon: <FileProtectOutlined />
                        },
                    ]}
                />
            </div>
            <div className='main'>
                <p className='toptxt'>以下信息为展示信息</p>
                <div className='box'>
                    <p>姓名</p>
                    <input type="text" placeholder='请输入真实姓名' value={uname} onChange={(e) => { dispatch(changeUname(e.target.value)) }} />
                </div>
                <div className='box'>
                    <p>平台科室</p>
                    {txt1.length === 0 ? <p className='rig' onClick={() => { navigate("/ysrz/ceck1") }}>
                        请选择平台科室 <span>❯</span>
                    </p> : <p onClick={() => { navigate("/ysrz/ceck1") }}>
                        {txt1}
                    </p>}
                </div>
                <div className='box'>
                    <p>职称</p>
                    {txt2.length === 0 ? <p className='rig' onClick={() => setVisible(true)}>
                        请选择职称 <span>❯</span>
                    </p> : <p onClick={() => setVisible(true)}>
                        {txt2}
                    </p>}
                    <Overlay visible={visible} onClick={() => setVisible(false)}
                        style={{
                            height: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}>
                        <div className='overlay' style={{ width: 360, height: 360, backgroundColor: '#fff', borderRadius: 4 }}>
                            <p>选择职称</p>
                            <div className='bigbox'>
                                <div className={cekidx === "主任医师" ? "color" : ""} onClick={(e) => { setCekidx(e.target.innerText) }}>主任医师</div>
                                <div className={cekidx === "副主任医师" ? "color" : ""} onClick={(e) => { setCekidx(e.target.innerText) }}>副主任医师</div>
                                <div className={cekidx === "主治医师" ? "color" : ""} onClick={(e) => { setCekidx(e.target.innerText) }}>主治医师</div>
                                <div className={cekidx === "住院医师" ? "color" : ""} onClick={(e) => { setCekidx(e.target.innerText) }}>住院医师</div>
                            </div>
                            <div className='btn'>
                                <button onClick={() => { setVisible(false); setCekidx(null) }}>取消</button>
                                <button className='active' onClick={() => { dispatch(changeTxt2(cekidx)); setVisible(false); }}>确定</button>
                            </div>
                        </div>
                    </Overlay>
                </div>
                <div className='box'>
                    <p>医院</p>
                    {txt3.length === 0 ? <p className='rig' onClick={() => { navigate("/ysrz/ceck2") }}>
                        请选择所在医院 <span>❯</span>
                    </p> : <p onClick={() => { navigate("/ysrz/ceck2") }}>
                        {txt3}
                    </p>}
                </div>
                <div className='box'>
                    <p>科室</p>
                    {txt4.length === 0 ? <p className='rig' onClick={() => { navigate("/ysrz/ceck3") }}>
                        请选择所在科室 <span>❯</span>
                    </p> : <p onClick={() => { navigate("/ysrz/ceck3") }}>
                        {txt4}
                    </p>}
                </div>
                <div className='box'>
                    <p>擅长</p>
                    {txt5.length === 0 ? <p className='rig' onClick={() => { navigate("/ysrz/ceck4") }}>
                        请选择擅长领域 <span>❯</span>
                    </p> : <p onClick={() => { navigate("/ysrz/ceck4") }}>
                        已完成
                    </p>}
                </div>
                <div className='box'>
                    <p>医生简介</p>
                    {txt6.length === 0 ? <p className='rig' onClick={() => { navigate("/ysrz/ceck5") }}>
                        请选择个人简介 <span>❯</span>
                    </p> : <p onClick={() => { navigate("/ysrz/ceck5") }}>
                        已完成
                    </p>}
                </div>
            </div>
            <div className='bottom'>
                <button onClick={() => { setCurrent(1); navigate("/ysrz/page2") }}>下一步</button>
            </div>
        </div>
    )
}
